<template>

  <div class="app-container" style=" background: linear-gradient(to left,  #a7c957,  #8BC34A) !important;;">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="68px">
    </el-form>
    <el-row :gutter=10 class="mb8">
      <div class="card-header"> 

      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['air:hour:export']"
        >导出</el-button>
      </el-col> -->
      <!-- <right-toolbar  @queryTable="refreshData"></right-toolbar> -->
      <!-- <el-tooltip class="item" effect="dark" content="刷新" placement="right-start">
        <el-button size="mini" circle icon="el-icon-refresh" @click="refreshData()" />
      </el-tooltip> -->
      </div>
    </el-row>
   
    <panel-group @handleSetLineChartData="handleSetLineData" :rank='crank' :totalMsgs="totalCount" :online='onlineNum' :alarmCount="warnCount"/>
          <el-row style="background-color:#DCEDC8;padding: 5px;">
            <el-tabs style="" class="custom-tabs" v-model="activeName1" @tab-click="handleClick" > 
              <el-tab-pane style="" label="空气监测数据" name="tfirst" :key="'tfirst'" :lazy=true >
              <el-row v-if="isfirst"  style="background-color:;">
                <el-col :xs=24 :sm=24 :lg=4 >
                  <label style="line-height: 36px;">首要污染物:{{this.primaryPollutant  }}</label>
                </el-col>
                <el-col :xs=24 :sm=24 :lg=4 >
                  <label style="line-height: 36px;">超标污染物:{{this.attainmentPollutant  }}</label>
                </el-col>
                <el-col :xs=24 :sm=24 :lg=16 >
                  <div class="card-header"> 
                  <div style="line-height: 36px;margin-right: 50px;">     
                    <el-tag  color="" size="small">{{ area}}</el-tag>
                    <el-tag :type="(quality == '优质' ? 'success' : (quality == '2' ? '' : (quality == '轻度污染' ? 'warning' : (quality == '中度污染' ? 'danger' : (quality == '重度污染' ? 'info' : 'info')))))" 
                     :color="(quality == '良好' ? '#FFD700': '' )" size="small" effect="dark" style="color:#292a24;">
                    {{quality   }}
                   </el-tag>
                  </div>
                </div>
                </el-col>
            
              </el-row>
            <el-row v-if="isfirst" v-loading="loading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)" class="row-style">
              <line-chart :chartData="lineChartData" />
            </el-row>

          <!-- </el-card> -->
              </el-tab-pane>
              <el-tab-pane label="历史数据" name="tsecond" :key="'tsecond'" :lazy=true>
                <el-row v-if="issecond" style=";">
                <div class="card-header"> 
                  <!-- <span>历史</span> -->
                  <div style="margin:10px 10px 0 0;">     
                    <el-radio-group v-model="radio"  @change="radioChange"  size="mini" fill='#d4237a'>
                      <el-radio-button label="daily">daily</el-radio-button>
                      <el-radio-button label="weekly">Weekly</el-radio-button>
                      <el-radio-button label="monthly">Monthly</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
               
              </el-row>
              <el-row v-if="radio==='daily' && issecond" v-loading="loading1" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)" class="row-style">
                    <line-chart :chartData="cycleData" />
                </el-row>
                <el-row v-if="radio==='monthly' && issecond" v-loading="loading1" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)" class="row-style">
                    <large-line :chartData="largeData" />
                </el-row>
                <el-row v-if="radio==='weekly' && issecond" v-loading="loading1" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)" class="row-style">
                    <line-chart :chartData="cycleData" />
                </el-row>
   

              </el-tab-pane>
            
              <el-tab-pane label="数据统计"  name="tthird" :key="'tthird'" :lazy=true >
              <el-row v-if="isthird"  >
                <div class="card-header"> 
                  
                </div>
              </el-row>
             
            <el-row style="margin-top: 1%;" v-if="isthird" v-loading="loading" element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)" >
            
            <el-col :xs="24" :sm="24" :lg="16" >
              <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix" style="height: 36px;line-height: 36px;">
                <span>天数分布</span>
              </div>
              <bar-chart2/>
            </el-card>
            
          </el-col>
          
            
  
    <el-col :xs=24 :sm=24 :lg=8 >
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <el-col :xs=24 :sm=24 :lg=4 >
            <label style="line-height: 36px;">类型:</label>
          </el-col>
          <el-col :xs=24 :sm=24 :lg=6 >
            
            <el-select v-model="value" placeholder="请选择" @change="changeOp">
              <el-option 
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
        </el-col>
        <el-col v-if="value == 1"  :xs=24 :sm=24 :lg=4 >
            <el-date-picker
            :clearable=false
              v-model="month"
              type="month"
              placeholder="选择月" 
              value-format="yyyy-MM"
              @change="getDate"
              :picker-options="pickerOptions"
              >
            </el-date-picker>
        </el-col>
        <el-col v-if="value == 2"  :xs=24 :sm=24 :lg=4>
          <el-date-picker
            :clearable=false
            v-model="year"
            type="year"
            placeholder="选择年"
            value-format="yyyy"
            @change="getDate"
            :picker-options="pickerOptions"
            >
          </el-date-picker>
        </el-col>
  </div>
          <pie-chart :dataList="pieData" :cate="cate"></pie-chart>
      </el-card>
          </el-col>

            </el-row>

              </el-tab-pane>

            </el-tabs>
        </el-row>
        
      
          <el-row gutter=24 style="padding:12px 0px 0 0;">
<!-- .el-tabs__nav-wrap::after -->
      <el-col :xs=24 :sm=24 :lg=8 >
        <el-card class="box-card1" shadow="hover">
          <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs-style">
            <el-tab-pane label="AQI仪表盘" name="first" >
              <div ref="usedmemory" style="align-items: center;max-width: 400px;max-height:300px;min-width: 293px;min-height: 300px;"/>
            </el-tab-pane>
            <el-tab-pane label="等级划分" name="second">
          
              <el-collapse accordion class="col-style">
             
                <!-- #f6e901，#ffa500，#FF0000，#8a1381，#c71236 -->
                  <el-collapse-item>
                    <template slot="title">
                      一级(0~50) 优 <i class="header-icon el-icon-circle-check" style="color:#7CFFB2"></i>
                    </template>
                    <div>健康影响:空气质量令人满意，基本无空气污染。</div>
                    <div>建议采取措施:各类人群可正常活动。</div>
                  </el-collapse-item>
                  <el-collapse-item>
                    <template slot="title">
                      二级(51~100) 良 <i class="header-icon el-icon-warning-outline" style="color:#f9e901"></i>
                    </template>
                    <div>健康影响:空气质量可接受，但某些污染物可能对极少数异常敏感人群健康有较弱影响。</div>
                    <div>建议采取措施:极少数异常敏感人群应减少户外活动。</div>
                  </el-collapse-item>
                  <el-collapse-item>
                    <template slot="title">
                      三级(101~150) 轻度污染 <i class="header-icon el-icon-warning-outline" style="color:#ffa500"></i>
                    </template>
                    <div>健康影响:易感人群症状有轻度加剧，健康人群出现刺激症状。</div>
                    <div>建议采取措施:儿童、老年人及心脏病、呼吸系统疾病患者应减少长时间、高强度的户外锻炼儿童、老年人及心脏病、呼吸系统疾病患者应减少长时间、高强度的户外锻炼。</div>
                  </el-collapse-item>
                  <el-collapse-item>
                    <template slot="title">
                      四级(151~200) 中度污染 <i class="header-icon el-icon-warning-outline" style="color:#FF0000"></i>
                    </template>
                    <div>健康影响:进一步加剧易感人群症状，可能对健康人群心脏、呼吸系统有影响。</div>
                    <div>建议采取措施:儿童、老年人及心脏病、呼吸系统疾病患者避免长时间、高强度的户外锻练，一般人群适量减少户外运动</div>
                  </el-collapse-item>
                  <el-collapse-item>
                    <template slot="title">
                      五级(201~300) 重度污染 <i class="header-icon el-icon-warning" style="color:#8a1381"></i>
                    </template>
                    <div>健康影响:心脏病和肺病患者症状显著加剧，运动耐受力降低，健康人群普遍出现症状。</div>
                    <div>建议采取措施:儿童、老年人和心脏病、肺病患者应停留在室内，停止户外运动,一般人群减少户外运动。</div>
                  </el-collapse-item>
                  <el-collapse-item>
                    <template slot="title">
                      六级(301~500) 严重污染 <i class="header-icon el-icon-warning" style="color:#c71236"></i>
                    </template>
                    <div>健康影响:健康人群运动耐受力降低，有明显强烈症状，提前出现某些疾病。</div>
                    <div>建议采取措施:儿童、老年人和病人应当留在室内，避免体力消耗，一般人群应避免户外活动。</div>
                  </el-collapse-item>
            </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="概念" name="third">
              <div style="height: 288px;">
              <el-row :gutter=24 style="margin-top: 3%;">
                <el-col :span=8><div class="grid-content" style="text-align: center;">
                  <label style="font-size: 14px;font-weight:light;line-height: 36px;">超标污染物</label>
                </div></el-col>
                <el-col :span=16><div class="grid-content">
                  <label style="font-size: 13px;;font-weight:light;"> 浓度超过国家环境空气质量二级标准的污染物，即IAQI大于100的污染物</label>
                </div></el-col>
              </el-row>
              <el-row :gutter=24 style="">
                <el-col :span=8><div class="grid-content ">
                  <label style="font-size: 14px;font-weight:light;line-height: 36px;">首要污染物</label>
                </div></el-col>
                <el-col :span=16><div class="grid-content ">
                  <label style="font-size: 13px;;font-weight:light;line-height: 36px;"> AQI大于50时IAQI最大的空气污染物</label>
                </div></el-col>
              </el-row>
              <el-row :gutter=24 style="">
                <el-col :span=8><div class="grid-content">
                  <label style="font-size: 14px;font-weight:light;line-height: 36px;">超标污染物</label>
                </div></el-col>
                <el-col :span=16><div class="grid-content">
                  <label style="font-size: 13px;;font-weight:light;"> 浓度超过国家环境空气质量二级标准的污染物，即IAQI大于100的污染物</label>
                </div></el-col>
              </el-row>
            </div>
            </el-tab-pane>
            
          </el-tabs>


  </el-card>
      </el-col>
   



      <el-col :xs=24 :sm=24 :lg=8 >
        <el-card class="box-card" shadow="hover" style=" ">
          <!-- <div slot="header" class="clearfix" style="  display: flex;
            justify-content: center;
            align-items: center;"> -->
            <div style=" height: 40px; display: flex;">
              <div style="width: 50%;">
                    <el-radio-group sty v-model="barfield"  @change="preChange"  size="mini" fill='#30365d'>
                      <el-radio-button label="barl">月内AQI</el-radio-button>
                      <el-radio-button label="pre">一日预测</el-radio-button>
                      <el-radio-button label="pre30">月内预测</el-radio-button>
                      <!-- <el-radio-button label="w">待定</el-radio-button> -->
                    </el-radio-group>
                  </div>
               <div v-if="barfield == 'pre30'" style="margin-left: 10px;"> 
                <el-date-picker
                style="width: 135px;"
                    v-model="value1"
                    type="date"
                    @change="getPreDate"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptionsPre"
                    placeholder="选择日期">
                  </el-date-picker>
                  <el-tooltip content="更多" placement="right">
                    <el-button class="morePre" @click="getPreData3mon()"  style=""  size="mini"  ><i class="el-icon-arrow-right el-icon--right" style="margin-left: 5px;"></i></el-button>
                  </el-tooltip>
               </div>
                    
            </div>
            <div v-if="barfield === 'barl'">
              <bar-chart/>
            </div>
            <div v-if="barfield === 'pre'">
              <el-row v-if="barfield === 'pre'" v-loading="preLoading">
              <predict-mix  :dataListAqi="preAqi" :dateList="preDate" @preLoad="getLoadStatus(arguments)"></predict-mix>
            </el-row>
            </div>
            <div v-if="barfield === 'pre30'">
              <el-row v-if="barfield === 'pre30'" v-loading="preLoading">
              <predict-mix  :dataListAqi="preAqiM" :dateList="preDateM" @preLoad="getLoadStatus(arguments)"></predict-mix>
            </el-row>
            </div>
        </el-card>
      </el-col>

      <el-col :xs=24 :sm=24 :lg=8 >
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
            <span>污染物分布</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <raddar-chart/>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog  title="周期预测" width="65%"  :visible.sync="morePreF" :close-on-click-modal="true" v-if="morePreF == true" >
  <div style=";height: 480px;">
    <el-row >
        <div style="margin: auto;width: 50%;display: flex;justify-content: space-around;">
          <div style="line-height: 28px;"><a>单项预测:</a></div>
            <div>
              <el-tooltip content="空气污染指数" placement="top">
                <a>  <el-tag size="medium"  @click="getPreDataAqi"><a>AQI</a></el-tag> </a>
            </el-tooltip>
          </div>
          <div>
            <el-tooltip content="二氧化硫浓度预测" placement="top">
              <a>  <el-tag size="medium"  @click="getSingle(so2T)"><a>SO2</a></el-tag> </a>
            </el-tooltip>
          </div>
          <div>
            <el-tooltip content="二氧化氮浓度预测" placement="top">
              <a>  <el-tag size="medium" @click="getSingle(no2)"><a>NO2</a></el-tag> </a>
          </el-tooltip>
          </div>

          <div>
            <el-tooltip content="一氧化碳浓度预测" placement="top">
              <a> <el-tag size="medium" @click="getSingle(co)"><a>CO</a></el-tag> </a>
          </el-tooltip>
          </div>

          <div>
            <el-tooltip content="臭氧浓度预测" placement="top">
           <a> <el-tag size="medium" @click="getSingle(o3)"><a>O3</a></el-tag></a>
          </el-tooltip>
          </div>

          <div>
            <el-tooltip content="直径小于等于 2.5 微米的颗粒物浓度预测" placement="top">
           <a> <el-tag size="medium" @click="getSingle(pm25)"><a>PM2.5</a></el-tag></a>
          </el-tooltip>
          </div>

          <div>
            <el-tooltip content="直径10微米以下的颗粒物浓度预测" placement="top">
              <a> <el-tag size="medium" @click="getSingle(pm10)"><a>PM10</a></el-tag></a>
          </el-tooltip>
          </div>
          </div>
    </el-row>
    <el-row> 
      <!-- <div style="font-size: large;"><i>{{ defaultTitle }}</i></div> -->
    </el-row>
    <el-row v-loading="month3Load"  element-loading-spinner="el-icon-loading">
      <pre-ms :dataList="dataPre" :dateList="datePre" :name="titles"></pre-ms>

    </el-row>
  
 
  </div>
 
</el-dialog>
    <el-dialog :title="title" :visible.sync="open" width="600px" height="500px" append-to-body>
      <el-table v-loading="loadingRank"
    :data="rankList"
    height=500px
    :max-height="500"
    >
    <el-table-column
      prop="num"
      label="排名"
      width="130">
    </el-table-column>
    <el-table-column
      prop="area"
      label="城市"
      width="130">
    </el-table-column>
    <el-table-column
      prop="aqi"
      label="污染指数"
      width="92"
      >
    </el-table-column>
        <el-table-column
      prop="quality"
      label="等级"
      width="91"
      >
    </el-table-column>
    <el-table-column
      prop="primary_pollutant"
      label="主要污染物"
      width="120"
      >
    </el-table-column>
  </el-table>
  <div slot="footer" class="dialog-footer" style="padding:0;">
    
    <el-table :show-header="false" 
     :data="nowcity"
     >
    <el-table-column
    prop="num"
      width="130">
    </el-table-column>
    <el-table-column
    prop="area"
    width="130">
    </el-table-column>
    <el-table-column
    prop="aqi"
    width="92"
    >
    </el-table-column>
    <el-table-column
      prop="quality"
      width="91"
      >
    </el-table-column>
    <el-table-column
      prop="primary_pollutant"
      label="主要污染物"
      width="120"
      >
    </el-table-column>
  </el-table>
      </div>
    </el-dialog>
  </div>
  
</template>

<script>  
import {getSinglePre,getPreDataFor3Month,getPreDataForMonth,getPreData, listPre_model, getPre_model, delPre_model, addPre_model, updatePre_model } from "@/api/pre_model/pre_model";
import {daysOfQuality, getCityRank, getRank,listPollutant,getLatestAqi,getAqiBar,getCycle,getAll} from "@/api/air/pollutant";
import { list, forceLogout } from "@/api/monitor/online";
import LineChart from "./LineChart.vue";
import BarChart from "./BarChart.vue";
import BarChart2 from "./BarChart2.vue";
import LargeLine from "./largeLine.vue";
import PieChart from "./PieChart.vue"
import RaddarChart from "./RaddarChart.vue"
import PanelGroup from "./PanelGroup.vue"
import dayjs from 'dayjs'
import * as echarts from "echarts";
import {countAlarm, count} from "@/api/sender/sender";
import predictMix from "./predict-charts/predictMixChart.vue";
import preMs from "./predict-charts/predictMs.vue"
const lineData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
export default {
  
  name: 'Index',
  components: {
    preMs,
    predictMix,
    LineChart,
    RaddarChart,
    PieChart,
    PanelGroup,
    BarChart,
    BarChart2,
    LargeLine ,
    preMs
  },


  // props: ['radarData'],
  data() {
   
    return {
      titles:"",
      dataPre:[],
      datePre:[],
      so2T:{
        title:"SO2(二氧化硫)",
        value:"so2"
      },
      Aqi_title:"AQI(污染指数):",
      no2:{
        title:"NO2(二氧化氮)",
        value:"no2"
      },
      pm10:{
        title:"PM10(颗粒物)",
        value:"pm10"
      },
      pm25:{
        title:"PM2.5(颗粒物)",
        value:"pm25"
      },
      co:{
        title:"CO(一氧化碳)",
        value:"co"
      },
      o3:{
        title:"O3(臭氧)",
        value:"o3"
      },
      defaultTitle:"AQI(污染指数)",
      aqi_title:"AQI(污染指数)",
      month3Load:true,
      morePreF:false,
      warnCount:0,
      preAqiM:[],
      preDateM:[],
      preDataList:{},
      preStart:'',
      preEnd:'',
      startDa:'',
      preDate:[],
      preLoading:true,
      preAqi:[],
      mailCount1:0,
      msgCount1:0,
      totalCount:0,
      index :["CO","NO2","SO2","O3","PM10","PM2.5"],
				primaryPollutant:"暂无",
				attainmentPollutant:"暂无",
      pickerOptions: {
	disabledDate(date) {
    var date2 = new Date("2021-1-1");
    if(date.getTime() > Date.now()){
      return date.getTime() > Date.now() ;
    }else if(date.getTime() < date2.getTime()){
      return date.getTime() < date2.getTime() ;
	  }
  },
},      
pickerOptionsPre: {
	disabledDate(date) {
    var date2 = new Date()
    date2.setDate(date2.getDate()-1)
    var date3 = new Date()
    date3.setDate(new Date().getDate()+30)
    if(date.getTime() > date3.getTime()){
      return date.getTime() > date3.getTime();
    }else if(date.getTime() < date2.getTime()){
      return date.getTime() < date2.getTime() ;
	  }
  },
},
      cate:[],
      pieData:[],
      month:this.getCurrentMonth(),
      year:this.getCurrentYear(),  
      options: [{
          value: 1,
          label: '按月'
        }, {
          value: 2,
          label: '按年',
        }],
        value:1,
      onlineNum:0,
      crank: 0, //父组件定义变量
      mid:[],
      nowcity:[],
      rankList: [],

      value1:'',

      barfield:'barl',

      days:null,
      day:31,

      tabView:'LineChart',
      radio: 'monthly',
      loading:true,
      loading1:true,
      loadingRank:true,
      isfirst: true,
      issecond: false,
      isthird: false,
      activeName1:'tfirst',
      activeName: 'first',
      radarData:[10,20,30,40,50,60],
      lineData: lineData.newVisitis,
      historyData: {
        PM25:[],
        CO:[],
        NO2:[],
        PM10:[],
        SO2:[],
        O3:[],
        time:[]
      },    
    lineChartData: {
        AQI:[],
        PM25:[],
        CO:[],
        NO2:[],
        PM10:[],
        SO2:[],
        O3:[],
        time:[],
        maxCo:3,
        max:0,
    },
    type:null,
    cycleList:[],
    cycleData:{
        AQI:[],
        PM10:[],
        PM25:[],
        SO2:[],
        NO2:[],
        CO:[],
        O3:[],
        time:[],
        max:0,
    } , 
    largeList:[],  
    largeData:{
        AQI:[],
        PM10:[],
        PM25:[],
        SO2:[],
        NO2:[],
        CO:[],
        O3:[],
        time:[],
        max:0,
    } ,   
      latestAqi:{
        aqi: null
      },
      usedmemory:null,
      // 遮罩层
      quality: null,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      // showSearch: false,
      // 总条数
      total: 0,
      // 小时空气检测表格数据
      pollutantList1: [],
      pollutantList: [],
      // 弹出层标题
      title: "",
      area:"",
      // 是否显示弹出层
      open: false,
      // 查询参数
       queryParams: {
        primary_pollutant: null,
        aqi: null,
        pm10: null,
        o38h: null,
        area: null,
        co: null,
        o3: null,
        area_code: null,
        so2: null,
        no2: null,
        quality: null,
        num: null,
        ct: null,
        pm25: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      
    }
    
  },
  mounted(){
    setInterval(this.refreshData,300000),
    setInterval(this.getAqi(),300000)
  },
  created() {
    // this.getHistoryData();
    this.getLinechartData();
    this.getAqi();
    this.getCity();
    this.getOnlineNum();
    this.getAlarmCount();
    this.getCountAll()
    this.getDaysOf(this.month)
    this.getPreMonth()
  },
  methods: {
    getSingle(val){
      this.month3Load = true
      this.defaultTitle = val.title
      this.titles = val.title
      getSinglePre(val.value).then(response=>{
       var data = response.data
       this.datePre= Object.keys(data)

       this.dataPre=  Object.values(data)
        setTimeout(() => {
          this.month3Load = false
           }, 500);
      })
    },
    getPreDataAqi(){
      this.month3Load = true
      this.defaultTitle = this.aqi_title
      this.titles = this.aqi_title
      getPreDataFor3Month().then(response=>{
        this.titles = this.defaultTitle
        this.datePre = Object.keys(response.data)
        this.dataPre= Object.values(response.data)
        setTimeout(() => {
          this.month3Load = false
           }, 500);
        
      })
    },
    getPreData3mon(){
      this.month3Load = true
      getPreDataFor3Month().then(response=>{
        this.titles = this.defaultTitle
        this.datePre = Object.keys(response.data)
        this.dataPre= Object.values(response.data)

        this.morePreF = true,
        setTimeout(() => {
          this.month3Load = false
           }, 200);
        
      })
    },


    getAlarmCount(){
      countAlarm("1").then(response=>{
        // console.log(response.data[0])
        this.warnCount = response.data[0].alarmCount
      })
    },
    getDateOfPreData(date){
      // console.log(this.preDataList[date].data)
      this.preDataList[date].data.forEach(a=>{
        this.preAqiM.push(a)
       })
      this.preDateM.length = 0
      this.preDataList[date].dateList.forEach(d=>{
        let s =  dayjs(new Date(d)).format('MM-DD HH:mm')
          this.preDateM.push(s)
      })
        // if(this.preDataList)
    },

    getPreMonth(){
      getPreDataForMonth().then(response=>{
        var max = null;
        // console.log(response)
        this.preDataList = response.data
        console.log(this.preDataList)
    for (let key in this.preDataList) {
      if(max == null){
        max = key
      }else{
        if(max < key){
          max = key
        }
      }
    }
    var min = null;
    for (let key in this.preDataList) {
      if(min == null){
        min = key
      }else{
        if(min > key){
          min = key
        }
      }
    }
    
    this.preStart = min;
    this.preEnd = max
      })
    },

    getLoadStatus(val){
        this.preLoading = val[0]
        
    },
    //获取预测数据
    getPreData(){

      getPreData().then(response=>{

       response.data.data.forEach(a=>{
        this.preAqi.push(a)
       })

       response.data.dates.forEach(d =>{
        let s =  dayjs(new Date(d)).format('MM-DD HH:mm')
          this.preDate.push(s)
       })
      })
    },
        //统计数据
        getCountAll(){
      count().then(response => {
        this.mailCount1 = response.data.mailCount
        this.msgCount1 = response.data.msgCount
        this.totalCount = this.mailCount1+this.msgCount1
        // console.log(response.data.mailCount)
      })
    },
    getPreDate(e){
      this.preAqiM.length = 0
      this.preDateM.length = 0
      this.value1 = e

      this.getDateOfPreData(e)
  
  },
    getDate(e){
  
      this.getDaysOf(e)
    },
    getDaysOf(date){
      daysOfQuality(date).then(response=>{
        if(response.length==0){
          this.$message.warning('暂无数据');
        }else{
          this.cate.length = 0
           this.pieData.length = 0;
          for(var key in response){
            	if(1 == key){
								var data = {"name":"优质","value":response[key]}
							}else if(2 == key){
								var data = {"name":"良好","value":response[key]}
							}else if(3 == key){
								var data = {"name":"轻度污染","value":response[key]}
							}else if(4 == key){
								var data = {"name":"中度污染","value":response[key]}
							}else if(5 == key){
								var data = {"name":"重度污染","value":response[key]}
							}
							else{
								var data = {"name":"严重污染","value":response[key]}
							}
              this.pieData.push(data)
              this.cate.push(data.name)
        }
        }
        // this.pieData.push(response)
      })
    },
    getCurrentMonth () {
				const date = new Date()
	            let year = date.getFullYear()
	            let month = date.getMonth() + 1
				month = month > 9 ? month : '0' + month
				return `${year}-${month}`
			},
			getCurrentYear () {
				const date = new Date()
			    let year = date.getFullYear()
				return `${year}`
			},
    changeOp(e){
      
      this.value = e
      if(this.value == 1){
        this.month = this.getCurrentMonth()
        this.getDaysOf(this.month)
      }else{
        this.year = this.getCurrentYear()
        this.getDaysOf(this.year)
      }
    },
    getCity(){
      getCityRank().then(response => {
        this.crank = response.data.num
        this.quality = response.data.quality
      })
    },
    getOnlineNum(){
      list().then(response => {
        this.onlineNum = response.rows.length
      })
    },
        /** 查询排行榜 */
      getList() {
      this.loadingRank = true
        getRank().then(response => {
        this.rankList = response.data;
        this.total = response.total;
        this.refreshCity();

        this.getNowCity(this.rankList);
        this.loadingRank = false;
      });
    
    },

    getNowCity(rankList){
      
      this.loadingRank = true
      rankList.forEach(data=>{
            if(data.area === this.area){
              if(this.nowcity.num==null){
              this.nowcity.push(data);
              }
            }
          })
          console.log(this.nowcity)
          this.nowcity = [this.nowcity[0]]
          this.loadingRank = false
    },
    refreshCity(){
      this.nowcity.length = 0;
    },
    refreshRank(){
      this.rankList.length = 0;
      this.getList();
    },
    preChange(val){
        if(val === 'barl'){
          this.barfield = 'barl'
         
        }else if(val === 'pre'){
          this.preAqi.length=  0
          this.preDate.length = 0
          this.barfield = 'pre'
          // 24预测一天
          this.getPreData()
        }else if(val === 'pre30'){
          // this.preAqi.length=  0
          // this.preDate.length = 0
          //预测30天
          this.preAqiM.length=  0
          this.preDateM.length = 0
          this.value1 = this.preStart
          this.getDateOfPreData(this.preStart)
          this.barfield = 'pre30'
          // this.getPreData('30')
        }
    },
    radioChange(val){
      if(val === 'daily'){
        this.type = 1;
        this.$nextTick(()=>{
          this.refreshCycle();
        })
      }else if(val === 'monthly'){
        this.$nextTick(()=>{
          this.refreshAll();
        })
      }else if(val === 'weekly'){
        this.type = 2;
        this.$nextTick(()=>{
          this.refreshCycle();
        })
      }
  },
  
    handleClick(tab){
      if(tab.name === 'tfirst'){
        this.isfirst = true
        this.issecond = false
         this.isthird = false;
        this.$nextTick(()=>{
          this.refreshData();
        })
      }else if(tab.name === 'tsecond'){
        this.isfirst = false;
        this.issecond = true
        this.isthird = false;
        this.$nextTick(()=>{
          this.type = 3;
          this.refreshAll();
        })
      }
      else if(tab.name === 'tthird'){
        // console.log(tab.name)
        this.isthird = true;
        this.isfirst = false;
        this.issecond = false;
        
        
      }
    },
    handleSetLineData(type) {
      if(type === 'rank'){
        this.title = "全国";
      this.open = true;
      this.refreshRank();
      }else if(type === 'online'){
        this.$router.push("/monitor/online/")
      }else if(type === 'msgdash'){
        this.$router.push("/air/pollutant")
      }
   
    },
    refreshCycle(){
      this.cycleData.PM25.splice(0);
      this.cycleData.PM10.splice(0);
      this.cycleData.CO.splice(0);
      this.cycleData.SO2.splice(0);
      this.cycleData.NO2.splice(0);
      this.cycleData.O3.splice(0);
      this.cycleData.time.splice(0);
      this.getCycleData();
    },
    refreshAll(){
      this.largeData.PM25.splice(0);
      this.largeData.PM10.splice(0);
      this.largeData.CO.splice(0);
      this.largeData.SO2.splice(0);
      this.largeData.NO2.splice(0);
      this.largeData.O3.splice(0);
      this.largeData.time.splice(0);
      this.getAllData();
    },
    getAllData(){
      getAll().then(response => {
        this.largeList = response.data;
          if(this.largeData.PM25.length==0){
            this.largeData.max = this.largeList[0].o3
            this.largeList.forEach(data=>
                {
                  this.largeData.PM25.push(Math.round(data.pm25*100)/100);
                    this.largeData.time.push(dayjs(data.start).format('YYYY-MM-DD'));
                    if(data.co>1){
                      data.co = data.co/100
                    }
                  this.largeData.CO.push(Math.round(data.co*100)/100);
                  this.largeData.PM10.push(Math.round(data.pm10*100)/100);
                  this.largeData.SO2.push(Math.round(data.so2*100)/100);
                  this.largeData.NO2.push(Math.round(data.no2*100)/100);
                  this.largeData.O3.push(Math.round(data.o3*100)/100);
                  if(data.pm10 > this.largeData.max ){
                    this.largeData.max = data.pm10
                  }
                  if(data.no2 > this.largeData.max ){
                    this.largeData.max = data.no2
                  }
                  if(data.pm25 > this.largeData.max ){
                    this.largeData.max = data.pm25
                  }
                  if(data.so2 > this.largeData.max ){
                    this.largeData.max = data.so2
                  }
                  console.log("---------------------")
                  console.log(this.largeData.max)
              })
              console.log("---------------------")
              // this.largeData.max = Math.ceil(this.largeData.max/100)/100
              console.log(this.largeData.max)
          }else{
            this.refreshAll();
          }
          this.loading1 = false;
     
      });
    },


    getCycleData(){
      getCycle(this.type).then(response => {
        this.cycleList = response.data;
          if(this.cycleData.PM25.length==0){
              this.cycleData.max = this.cycleList[0].o3
            this.cycleList.forEach(data=>
                {
                  this.cycleData.PM25.push(Math.round(data.pm25*100)/100);

                    if(this.type == 3) this.cycleData.time.push(dayjs(data.end).format('YYYY-MM'));
                    else if(this.type == 4){
                      this.cycleData.time.push(dayjs(data.end).format('YYYY'));
                    }
                  else {
                    this.cycleData.time.push(dayjs(data.start).format('MM-DD'));
                  }
                  if(data.co>1){
                      data.co = data.co/100
                    }
                  this.cycleData.CO.push(Math.round(data.co*100)/100);
                  this.cycleData.PM10.push(Math.round(data.pm10*100)/100);
                  this.cycleData.SO2.push(Math.round(data.so2*100)/100);
                  this.cycleData.NO2.push(Math.round(data.no2*100)/100);
                  this.cycleData.O3.push(Math.round(data.o3*100)/100);
                  if(data.o3>this.cycleData.max){
                    this.cycleData.max = data.o3
                  }
                  if(data.pm10 > this.cycleData.max){
                    this.cycleData.max = data.pm10
                  }
                  if(data.no2 > this.cycleData.max ){
                    this.cycleData.max = data.no2
                  }
                  if(data.pm25 > this.cycleData.max){
                    this.cycleData.max = data.pm25
                  }
                  if(data.so2 > this.largeData.max ){
                    this.cycleData.max = data.so2
                  }
              })
              this.cycleData.max = 100*Math.ceil(this.cycleData.max/100)
              console.log(this.cycleData.max)
          }else{
            this.refreshCycle();
          }
          this.loading1 = false;
     
      });
    },

    refreshHis(){
      this.historyData.PM25.splice(0);
      this.historyData.PM10.splice(0);
      this.historyData.time.splice(0);
      this.historyData.CO.splice(0);
      this.historyData.SO2.splice(0);
      this.historyData.NO2.splice(0);
      this.historyData.O3.splice(0);
      this.getHistoryData(this.day);
    },


    refreshData(){
     
      this.lineChartData.AQI.splice(0);
      this.lineChartData.PM25.splice(0);
      this.lineChartData.time.splice(0);
      this.lineChartData.CO.splice(0);
      this.lineChartData.PM10.splice(0);
      this.lineChartData.SO2.splice(0);
      this.lineChartData.NO2.splice(0);
      this.lineChartData.O3.splice(0);
      this.area = '城市';
      this.quality = '等级';
         
      this.getLinechartData();
      
    },
    refreshAQI(){

     this.area = '城市';
     this.quality = '等级';
        
     this.getLinechartData();
     
   },

    getAqi(){
      getLatestAqi().then(response => {
        if(response.data.primary_pollutant != ''){
          this.primaryPollutant = response.data.primary_pollutant
        }
					
					var data = [response.data.co,response.data.no2,response.data.so2,response.data.o3,response.data.pm10,response.data.pm25]
					let max = data[0]
					data.forEach(item => max = item > max ? item : max)
					if(max>100){
						this.attainmentPollutant=""
						for (var i in data) {
							if(data[i]>=100){
								this.attainmentPollutant =this.attainmentPollutant + this.index[i]+","
							}
						}
					this.attainmentPollutant =this.attainmentPollutant.substr(0, this.attainmentPollutant.length - 1);
					}

        this.latestAqi.aqi = response.data.aqi;

         this.aqi = this.latestAqi.aqi;
        
        this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
        this.usedmemory.setOption({
          tooltip: {
            formatter: "{a} : " + this.latestAqi.aqi,
          },
          series: [
    {
      name: "AQI",
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      center: ['50.5%', '75%'],
      radius: '90%',
      min: 0,
      max: 500,
      splitNumber: 5,
      axisLine: {
        lineStyle: {
          width: 8,
          color: [
        
          [this.aqi<=50?this.aqi/500:0.1,this.aqi<=50?'#7CFFB2':(this.aqi>50 && this.aqi<=100?'#f6e901':(this.aqi>100&&this.aqi<=150?'#ffa500':(this.aqi>150&&this.aqi<=200?'#FF0000':
          (this.aqi>200&&this.aqi<=300?'#8a1381':(this.aqi>300?'#c71236':'#FFFFFF')))
          ))],
            [this.aqi>50 && this.aqi<=100 ? this.aqi/500:0.2, this.aqi>50 && this.aqi<=100?'#f6e901':(this.aqi>100&&this.aqi<=150?'#ffa500':(this.aqi>150&&this.aqi<=200?'#FF0000':
          (this.aqi>200&&this.aqi<=300?'#8a1381':(this.aqi>300?'#c71236':'#FFFFFF'))))],
            [this.aqi>100 && this.aqi<=150 ? this.aqi/500:0.3, this.aqi>100&&this.aqi<=150?'#ffa500':(this.aqi>150&&this.aqi<=200?'#FF0000':
          (this.aqi>200&&this.aqi<=300?'#8a1381':(this.aqi>300?'#c71236':'#FFFFFF')))],
            [this.aqi>150 && this.aqi<=200 ? this.aqi/500:0.4, this.aqi>150&&this.aqi<=200?'#FF0000':
          (this.aqi>200&&this.aqi<=300?'#8a1381':(this.aqi>300?'#c71236':'#FFFFFF'))],
            [this.aqi>200 && this.aqi<=300 ? this.aqi/500:0.6, this.aqi>200&&this.aqi<=300?'#8a1381':(this.aqi>300?'#c71236':'#FFFFFF')],
            [this.aqi>300 ? this.aqi/500 :1, this.aqi>300?'#c71236':'#FFFFFF'],
            [1, '#FFFFFF']
          ]
        }
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '12%',
        width: 0,
        offsetCenter: [0, '-60%'],
        itemStyle: {
          color: '#FFFFFF'
        }
      },
      axisTick: {
        length: 12,
        lineStyle: {
          color: '#FFFFFF',
          width: 0
        }
      },
      splitLine: {
        length: 10,
        lineStyle: {
          color: '#FFFFFF',
          width: 2,
        }
      },
      axisLabel: {
        color: '#FFFFFF',
        fontSize: 15,
        distance: -30,
        rotate: 'tangential',
      },
      title: {
        offsetCenter: [0, '0'],
        fontSize: 15,
        color:'#FFFFFF'
        
      },
      detail: {
        fontSize: 20,
        offsetCenter: [0, '-35%'],
        valueAnimation: true,
        color: 'inherit'
      },
      data: [
        {
          value: this.latestAqi.aqi,
          name: 'AQI',
        }
      ]
      
    }
  ]
    
        });
      })

    },

    getLinechartData(){
      listPollutant(this.queryParams).then(response => {
        var pre = null;
        var flag = false;
          this.pollutantList = response.rows;
          ;
          this.area = this.pollutantList[this.pollutantList.length-1].area;
          console.log(this.pollutantList[this.pollutantList.length-1].quality)
          // this.quality = this.pollutantList[0].quality;
          var index = 0;
          if(this.lineChartData.PM25.length==0){
            this.lineChartData.max = this.pollutantList[0].o3
            this.pollutantList.forEach(data=>{
              
          this.lineChartData.PM25.push(data.pm25);
          if(pre == null){
            pre = dayjs(data.ct).format('MM-DD HH:mm')
          }else{
            if(pre > dayjs(data.ct).format('MM-DD HH:mm')){
              flag = true
            }
          }
          this.lineChartData.time.push(dayjs(data.ct).format('MM-DD HH:mm'))
          if(data.co>1){
                      data.co = data.co/100
                    }
          this.lineChartData.CO.push(data.co);
          this.lineChartData.PM10.push(data.pm10);
          this.lineChartData.SO2.push(data.so2);
          this.lineChartData.NO2.push(data.no2);
          this.lineChartData.O3.push(data.o3);
          if(data.o3>this.lineChartData.max){
                    this.lineChartData.max = data.o3
                  }
          if(data.pm10 > this.lineChartData.max){
                    this.lineChartData.max = data.pm10
                  }
                  if(data.no2 > this.lineChartData.max ){
                    this.lineChartData.max = data.no2
                  }
                  if(data.pm25 > this.lineChartData.max){
                    this.lineChartData.max = data.pm25
                  }
                  if(data.so2 > this.lineChartData.max ){
                    this.lineChartData.max = data.so2
                  }
          if(index == 0){
            this.startDa = data.ct
          }
          if(index == this.pollutantList.length-1){
            if(this.startDa < data.ct){
              this.startDa = data.ct
            }
          }

          index++;
        })
        console.log("-------------------------")
        this.lineChartData.max = 100*Math.ceil(this.lineChartData.max/100)
        if(flag){
          this.lineChartData.time = this.lineChartData.time.reverse()
        }
          }
          this.loading = false;
      });
    //  this.lineChartData.time[0]
    // this.lineChartData.time[this.lineChartData.time.length-1]
    
    // console.log(this.lineChartData.time[this.lineChartData.time.length-1])

  },
  getHistoryData(){
      this.days = this.day
      getAqiBar(this.days).then(response => {
          this.pollutantList1 = response.data;
          if(this.historyData.PM25.length==0){
                this.pollutantList1.forEach(data=>
                {
                  this.historyData.PM25.push(Math.round(data.pm25*100)/100);
                  this.historyData.time.push(dayjs(data.ct).format('MM-DD'))
                  if(data.co>1){
                      data.co = data.co/100
                    }
                  this.historyData.CO.push(Math.round(data.co*100)/100);
                  this.historyData.PM10.push(Math.round(data.pm10*100)/100);
                  this.historyData.SO2.push(Math.round(data.so2*100)/100);
                  this.historyData.NO2.push(Math.round(data.no2*100)/100);
                  this.historyData.O3.push(Math.round(data.o3*100)/100);
              })
          }else{
            this.refreshHis();
          }
          this.loading1 = false;
     
      });
    },
    
  }
}

</script>


<style lang="scss" scoped>
.morePre{
  color: #fff;
  background: #30365d;
  width: 31.6px;
  height: 31.6px;
  margin-left: 5px;
  padding: 0px;
}
.morePre:hover,
.morePre:focus{
  background: #434b83;
}
::v-deep .el-radio-button--mini .el-radio-button__inner {
    padding: 11px 3px;
    width: 60px;
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
 
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
.box-card1{
  background: linear-gradient(to right,  #7ddcff,  #0ebeff) !important;
  border:solid 1px #686868

}
.card-header{
  display: flex;
  float: right;
  // text-align:justify;
  // text-align-last: justify;
  // align-items:flex-end;
}


::v-deep .el-dialog__footer{
  padding: 0px 20px 0px 20px;
    text-align: right;
    -webkit-box-sizing: border-box;
    margin-top: -55px;
    box-sizing: border-box;
}
::v-deep .el-dialog__body {
    padding: 0px 20px 0px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar{
    width: 0;
  }
::v-deep .el-tabs__header {
  padding: 0;
    position: relative;
    margin: 0 0 0px;
  }
::v-deep .el-tabs__nav-wrap::after{
  content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #FFF9C4;
    z-index: 1;
}
.tabs-style ::v-deep .el-tabs__item.is-active{
  color: #ffffff;
}
.tabs-style ::v-deep .el-tabs__item {
  color: #ffffff;
}
.tabs-style ::v-deep .el-tabs__active-bar{
  background-color: #ffffff;
}

.col-style ::v-deep .el-collapse-item__header{
  background: linear-gradient(to right,  #7ddcff,  #0ebeff) !important;

    // color: #fff;
    cursor: pointer;
    border-bottom: 0px;
}
.col-style ::v-deep .el-collapse-item__content {
  background: linear-gradient(to right,  #7ddcff,  #0ebeff) !important;
    // color: #FFF;
}
.col-style ::v-deep .el-collapse-item__wrap {
    will-change: height;
    background-color: #FFFFFF;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
     border-bottom: 0px ; 
}
.col-style ::v-deep .el-collapse-item__header {
    height: 49.9px;
}
.row-style{
  
  padding:16px 16px 0;
  margin-bottom:32px;
  border-bottom-left-radius:15px;
  border-bottom-right-radius: 15px;
  
}
.app-container{
}
.bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    text-align: center;
    border-radius: 4px;
    min-height: 36px;
  }

 
@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>